<template>
  <div class="app-container home">
    <!--    <div id="box" class="box" ref="chartDom"></div> echart盒子-->
    <div class="right">
      <el-card class="right_card">
        <div class="right_top">简单看板</div>
        <div class="right_Value">
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-customer"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">5</span>
                <span style="color: #ccc">当前客户数(个)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-Sign-Contract"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">23000.00</span>
                <span style="color: #ccc">合同订单金额</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-huijiyingshouguanli"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">0.00</span>
                <span style="color: #ccc">采购金额</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-customer_management_fill"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">3</span>
                <span style="color: #ccc">新增客户数(个)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-yewujihui1"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">2</span>
                <span style="color: #ccc">新增机会数(个)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-yingshoushenhe"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">10000.00</span>
                <span style="color: #ccc">应收未收(元)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-customer_source_fill"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">4</span>
                <span style="color: #ccc">跟进客户数(个)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-jingyingshouru"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">3000.00</span>
                <span style="color: #ccc">新增机会金额(元)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-fukuan"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">2000.00</span>
                <span style="color: #ccc">计划付款(元)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-contract2-fill"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">6</span>
                <span style="color: #ccc">合同订单数(个)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-contract_fill"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">0</span>
                <span style="color: #ccc">采购合同数(个)</span>
              </div>
            </div>
          </div>
          <div class="little_box">
            <div class="little_box_1">
              <div class="icon">
                <span
                  class="iconfont icon-cost"
                  style="font-size: 30px; color: #ff8c2e"
                ></span>
              </div>
              <div class="text">
                <span style="font-size: 22px">3000</span>
                <span style="color: #ccc">当前库存成本(元)</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="right_card_2" style="margin-top: 20px">
        <div class="right_top">业绩目标</div>
        <!--        仪表盘-->
        <div class="card_2_box">
          <div id="box" class="box" ref="chartDom1"></div>
          <div class="right_box">
            <h3>合同金额</h3>
            <div>完成值</div>
            <div>0.00元</div>
            <div>目标值</div>
            <div>0.00元</div>
            <div>未完成值</div>
            <div>0.00元</div>
          </div>
        </div>
      </el-card>
      <!--      pk榜-->
      <el-card class="right_card_3" style="margin-top: 20px; height: 500px">
        <div class="right_top">PK榜</div>
        <div class="card_3_box">
          <div class="box3" ref="chartDom2"></div>
        </div>
      </el-card>
      <el-card class="right_card_4" style="margin-top: 20px">
        <div class="right_top">客户</div>
        <!--        折线图-->
        <div class="card_4_box" style="margin-top: 20px">
          <div id="box4" class="box4" ref="chartDom3"></div>
        </div>
      </el-card>
      <el-card class="right_card_5" style="margin-top: 20px">
        <div class="right_top">资金管理</div>
        <!--        资金管理-->
        <div class="card_5_box">
          <div class="box5" ref="chartDom4"></div>
        </div>
      </el-card>
    </div>
    <div class="left">
      <el-card class="left_card">
        <div style="border-bottom: 2px solid #ccc">
          <div style="margin-bottom: 10px">遗忘提醒</div>
        </div>
        <div class="box">
          <div class="little_box_one" style="background-color: #f6f7fb">
            <span class="text">一到两周未联系</span>
            <span class="number"
              ><span style="font-size: 20px">5</span> 个</span
            >
          </div>
          <div class="little_box_one" style="background-color: #f4f4f4">
            <span class="text">两周到一个月未联系</span>
            <span class="number"
              ><span style="font-size: 20px">3</span> 个</span
            >
          </div>
          <div class="little_box_one" style="background-color: #e7e7e7">
            <span class="text">一个月到两月未联系</span>
            <span class="number"
              ><span style="font-size: 20px">1</span> 个</span
            >
          </div>
          <div class="little_box_one" style="background-color: #e1e1e1">
            <span class="text">两月以上未联系</span>
            <span class="number"
              ><span style="font-size: 20px">0</span> 个</span
            >
          </div>
        </div>
      </el-card>
      <el-card class="left_card_one">
        <div style="border-bottom: 2px solid #ccc">
          <div style="margin-bottom: 10px">客户关怀</div>
        </div>
        <div class="box">
          <div class="little_box_one">
            <span class="text">七天内新增客户</span>
            <span class="number"
              ><span style="font-size: 20px">4</span> 个</span
            >
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Index",

  data() {
    return {
      chart1: null,
      option1: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} km/h",
              color: "auto",
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      },
      chart2: null,
      option2: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.renderChart();
  },
  methods: {
    async renderChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = echarts.init(document.getElementById("box"));
      console.log(document.getElementById("box"));
      console.log(this.chart1);
      await this.chart1.setOption(this.option1);
      //  折线图
      // 基于准备好的dom，初始化echarts实例
      this.chart2 = echarts.init(document.getElementById("box4"));
      console.log(document.getElementById("box4"));
      console.log(this.chart2);
      await this.chart2.setOption(this.option2);
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.app-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .right {
    width: 60%;
    background-color: #ffffff;
    .right_top {
      height: 50px;
      line-height: 50px;
    }
    .right_Value {
      width: 100%;
      height: 300px;
      display: flex;
      overflow: hidden;
      justify-content: space-between;
      flex-direction: column;
      flex-wrap: wrap;
      .little_box {
        width: 25%;
        height: 33%;

        .little_box_1 {
          width: 100%;
          padding-top: 32px;
          .icon,
          .text {
            display: inline-block;
            height: 100%;
          }
          .text {
            margin-left: 6px;
            span {
              display: block;
            }
          }
        }
      }
    }
    .right_card_2 {
      .right_top {
        height: 50px;
        line-height: 50px;
      }
      width: 100%;

      .card_2_box {
        text-align: center;
        #box {
          margin-left: 70px;
          width: 500px;
          height: 500px;
        }
        .right_box {
          position: relative;
          top: -340px;
          right: -160px;
        }
      }
    }
    .right_card_4 {
      width: 100%;
      .card_4_box {
        .box4 {
          width: 500px;
          height: 500px;
        }
      }
    }
  }
  .left {
    width: 38%;
    background-color: #ffffff;
    .left_card {
      .box {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .little_box_one {
          width: 230px;
          height: 100px;
          text-align: center;
          line-height: 40px;
          margin-bottom: 20px;
          border-radius: 5px;
          border: 1px solid #cccccc;
          .text,
          .number {
            display: block;
            margin-left: 10px;
          }
          .text {
            font-size: 18px;
            color: #cccccc;
          }
        }
      }
    }

    .left_card_one {
      margin-top: 15px;
      .box {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .little_box_one {
          width: 230px;
          height: 100px;
          text-align: center;
          line-height: 40px;
          margin-bottom: 20px;
          border-radius: 5px;
          border: 1px solid #cccccc;
          .text,
          .number {
            display: block;
            margin-left: 10px;
          }
          .text {
            font-size: 18px;
            color: #cccccc;
          }
        }
      }
    }
  }
}
</style>
